<template>
  <el-dialog
    v-model="visible"
    :title="form._id ? '编辑子账号' : '新增子账号'"
    width="650px"
    @closed="onReset"
    append-to-body
  >
    <el-form :model="form" inline :rules="rules" label-width="70px" ref="formRef">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName" placeholder="请输入用户名" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="form.phone"
              maxlength="11"
              oninput="value=value.replace(/[^\d]/g,'')"
              show-word-limit
              :disabled="form._id ? true : false"
              :readonly="form._id ? true : false"
              placeholder="请输入手机号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" clearable placeholder="请选择">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色" prop="role">
            <el-select v-model="form.role" clearable placeholder="请选择" @change="roleChange">
              <el-option
                :label="item.name"
                :value="item._id"
                v-for="item in roleData"
                :key="item._id"
              />
              <!-- <el-option label="普通用户" :value="0" /> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="返点" prop="point">
            <el-input v-model="form.point" placeholder="请输入返点" :max="100" clearable>
              <template #append>%</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="渠道码" prop="channelCode">
            <el-input v-model="form.channelCode" placeholder="渠道码" :max="100" clearable>
             
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import type { IUserItem } from '@/api/user/type';
import { useAgentsStore } from '@/store';
// import { roleList } from '@/api/role';
// import { useTable } from '@/hooks/useTable';
const visible = ref(false);
const formRef = ref();

const form = reactive({
  _id: '',
  phone: '',
  userName: '',
  password: '',
  status: 1,
  role: '',
  roleName: '',
  point: 0,
  channelCode: ''
});

const agentsStore = useAgentsStore();
// const { tableData } = useTable({
//   apiFn: roleList,
//   isPageable: true
// });

const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }],
  point: [{ required: true, message: '请输入返点', trigger: 'blur' }]
};

const init = (data?: IUserItem) => {
  visible.value = true;
  if (data) Object.assign(form, data);
};

const onReset = () => {
  if (!formRef.value) return;
  form._id = '';
  form.phone = '';
  form.userName = '';
  form.password = '';
  form.status = 1;
  form.role = '';
  form.roleName = '';
  form.point = 0;
  formRef.value.resetFields();
};
const roleChange = (val: string) => {
  console.log('val', val);
  const roleItem = props.roleData.find((item) => item._id === val);
  console.log('roleItem', roleItem.role_name);
  form.roleName = roleItem.role_name;
};
const submit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      console.log('提交新增用户');
      if (!form._id) {
        agentsStore.addUserAction(form).then(() => {
          visible.value = false;
          props.getList();
        });
      } else {
        // 编辑
        agentsStore.editAgentsUserInfoAction(form).then(() => {
          visible.value = false;
          props.getList();
        });
      }
    }
  });
};

const props = defineProps<{
  getList: Function;
  roleData: any[];
}>();

defineExpose({ init });
</script>

<style lang="scss" scoped></style>
